<template>
  <div class="closing">
    <div>
      <el-button type="primary" size="mini" @click="newlyAdjustment">{{ $t('btn.save') }}</el-button>
    </div>
    <div class="header">
      <div class="header-name">
        <el-form :model="subDetails" label-width="100px" size="mini">
          <el-form-item :label="$t('market.billType')">
            <el-select
              v-model="subDetails.fbillType"
              @change="queryTBasBilltype1"
            >
              <el-option
                v-for="item in billtypes"
                :key="item.fid"
                :label="item.fname"
                :value="item.fid"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('market.businessType')">
            <el-select
              v-model="subDetails.fbussinesstypeid"
            >
              <el-option
                v-for="item in billtypes1"
                :key="item.fid"
                :label="item.fname"
                :value="item.fid"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('market.period')">
            <el-date-picker
              v-model.trim="subDetails.fdate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 152px"
            />
          </el-form-item>
          <el-form-item :label="$t('market.note')">
            <el-input v-model="subDetails.fremark" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table-content">
      <div style="margin-bottom: 5px;">
        <el-button size="mini" @click="newHang">{{ $t('btn.newHang') }}<!--新增行--></el-button>
        <el-button size="mini" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
      </div>
      <jc-table
        v-loading="loading"
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        serial
        @rowClick="rowClick"
      >
        <!--  物料编码-->
        <template v-slot:billSlot="col">
          <el-input
            v-model.trim="col.scope.row.materialNumber"
            size="mini"
            @input="getAtuo(col.scope.$index, col.scope.row.materialNumber, 1)"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="materia(col.scope.$index)"
            />
          </el-input>
          <div v-if="aotuTab && material === col.scope.$index" :class="material<7 ? 'tabPosit': 'tabPosit1'">
            <number-code :fnumber="fnumber" @material="materialData" />
          </div>
        </template>
        <!--仓库-->
        <template v-slot:tagSlot="col">
          <el-input
            v-model="col.scope.row.stockName"
            size="mini"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="handleWarehouse(col.scope.$index)"
            />
          </el-input>
        </template>
        <!--    调整金额    -->
        <template v-slot:btnState="col">
          <el-input-number v-model="col.scope.row.fadjustworth" size="mini" />
        </template>
        <!--    备注  -->
        <template v-slot:btnStates="col">
          <el-input v-model.number="col.scope.row.fremark" size="mini" />
        </template>
      </jc-table>
    </div>
    <!--物料弹窗-->
    <material v-if="isMateria" @material="materialData" />
    <!--仓库-->
    <selectCK v-if="seleceVisiblit" @client="selectData" />
  </div>
</template>

<script>
import {
  createFinCola
} from '@/api/financial/warehousing'
import { queryViewItem } from '@/api/marketManage/marketOrder'

export default {
  name: 'CreateAdjustment',
  components: {
    material: () => import('@/views/market/marketManage/createMarkerOrder/components/material'),
    selectCK: () => import('@/views/production/collect/components/seleceCK'),
    numberCode: () => import('@/components/NumberCode')
  },
  data() {
    return {
      isMateria: false,
      seleceVisiblit: false,
      aotuTab: false,
      material: 0,
      fnumber: '',
      subDetails: {
        fbillType: 1248,
        fbussinesstypeid: 1535,
        fdate: new Date().toLocaleDateString().replaceAll('/', '-'),
        fremark: ''
      },
      billtypes: [],
      billtypes1: [],
      indexSelf: 0,
      loading: false,
      // 表头
      tableData: [{
        billtype: 0,
        billentryId: 0,
        materialNumber: '',
        frombillNo: '',
        billtypename: '',
        stockName: '',
        fremark: '',
        fadjustworth: ''
      }], // 存货收发存明细表
      tableHeight: '70vh',
      tableHeader: [
        { label: this.$t('market.fmaterial'), type: 'bill', prop: 'materialNumber' },
        { label: this.$t('shop.fname2'), prop: 'fname' },
        { label: this.$t('shop.fmodel'), prop: 'fmodel' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecificaTion' },
        { label: this.$t('shop.fdescripTion'), prop: 'fdescripTion', width: '200' },
        { label: this.$t('market.frombillNo'), prop: 'frombillNo' },
        { label: this.$t('market.billType'), prop: 'billtypename' },
        { label: this.$t('market.stock2'), type: 'tag', prop: 'stockName' },
        { label: this.$t('market.adjustAmount'), type: 'state', prop: 'fadjustworth' },
        { label: this.$t('market.entryRemark'), type: 'states', prop: 'fremark' }
      ]
    }
  },
  created() {
    this.queryTBasBilltype()
    const { date, details, fid } = this.$route.params
    if (fid) {
      this.subDetails.fdate = date + '-01'
      this.subDetails.fbillType = fid
      this.tableData = details
      this.tableData.map((item, index) => {
        item.index = index
      })
    }
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 230px)' : '73vh'
  },
  methods: {
    // 输入物料编码
    getAtuo(index, fnumber) {
      this.aotuTab = true
      this.material = index
      var vm = this
      clearTimeout(vm.timer) // 清除未执行的代码，重置回初始化状态
      vm.timer = setTimeout(() => {
        this.fnumber = fnumber
      }, 600)
    },
    // 查询单据类型
    async queryTBasBilltype() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_FIN_COLA_BILLTYPE' })
      this.billtypes = RES.list
      this.queryTBasBilltype1()
    },
    // 查询业务类型
    async queryTBasBilltype1() {
      const viewName = this.subDetails.fbillType === 1248 ? 'SX_FIN_COL_IN_STOCK' : 'SX_FIN_COL_OUT_STOCK'
      const { data: RES } = await queryViewItem({ viewName })
      this.billtypes1 = RES.list
    },
    // 保存
    newlyAdjustment() {
      const DATA = {
        ...this.subDetails,
        details: this.tableData
      }
      createFinCola(DATA).then(res => {
        if (res.code === 0) {
          // 关闭当前页面
          this.$store.dispatch('tagsView/guanbi', this.$route)
          this.$router.push({ path: `/adjustmentDetails/${res.data.fid}` })
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 打开物料
    materia(index) {
      this.indexSelf = index
      this.isMateria = true
    },
    materialData(ev) {
      if (ev.fnumber) {
        const item = this.tableData[this.indexSelf]
        item.fmodel = ev.fmodel
        item.materialNumber = ev.fnumber
        item.fname = ev.fname
        item.fmaterialId = ev.fmaterialId
        item.fspecificaTion = ev.fspecificaTion
        item.fdescripTion = ev.fdescripTion
        item.funitName = ev.funit
        item.stockName = ev.fstock
        item.fstockId = ev.fstockId
        this.aotuTab = false
      }
      this.isMateria = false
    },
    // 仓库
    handleWarehouse(index) {
      this.indexSelf = index
      this.seleceVisiblit = true
    },
    selectData(ev) {
      if (ev.fstockId) {
        const item = this.tableData[this.indexSelf]
        item.fstockId = ev.fstockId
        item.stockName = ev.fname
      }
      this.seleceVisiblit = false
    },
    newHang() {
      this.tableData.push({
        billtype: 0,
        billentryId: 0,
        materialNumber: '',
        frombillNo: '',
        billtypename: '',
        stockName: '',
        fremark: '',
        fadjustworth: ''
      })
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 删除行
    delHang() {
      this.tableData.splice(this.indexSelf, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.closing {
  @include listBom;
  .header{
    margin-top: 10px;
    .header-name{
      span {
        width: 100px;
        margin-right: 10px;
        text-align: right;
      }
    }
  }
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      height: 35px;
      width: 268px;
      margin-bottom: 5px;
      //&::v-deep .el-input--mini .el-input__inner{
      //  height: 22px;
      //}
      .btnType {
        margin-right: 20px;
      }

      .el-date-editor.el-input {
        width: 100% !important;
      }

      .el-select {
        width: 100%;
      }
    }
  }
  .tabPosit {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: 3.5vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 99999!important;
  }
  .tabPosit1 {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: -25.69vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 9999;
  }
}
</style>
